<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>维基解密</title>

    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: green;
        }
        #container {
            width: 300px;
            height: 500px;
            background-color: wheat;
            position: relative;
        }
        .block {
            background-color: gray;
            position: absolute;
            box-sizing: border-box; /**padding也包含在总大小里*/
            border: 1px solid lightblue;
        }
        .block-highlight {
            background-color: rebeccapurple;
        }
    </style>

</head>
<body>

    <div id="container"></div>

</body>

<script>
    const RowCount = 5, ColCount = 3, BlockWidthHeight = 100

    /***
     * 给div.board添加小div块
     * @param row 行号: 0, 1, 2
     * @param col 列号: 0, 1, 2, 3, 4
     * @param canHighlight 能否点亮
     */
    function createABlock(row, col, canHighlight) {
        const containerHtml = document.getElementById('container')
        const blockNode = document.createElement('div')

        if (canHighlight) {
            blockNode.className = 'block block-highlight'
        }else {
            blockNode.className = 'block'
        }

        blockNode.style.width = `${BlockWidthHeight}px`
        blockNode.style.height = `${BlockWidthHeight}px`

        const x = col * BlockWidthHeight
        const y = row * BlockWidthHeight
        blockNode.style.left = `${x}px`
        blockNode.style.top = `${y}px`

        containerHtml.appendChild(blockNode)
    }


    /** 测试代码  */
    // const one = [[0, 0, 0], [0, 1, 0], [0, 1, 0], [0, 1, 0], [0, 0, 0]]
    // for (let i = 0; i < RowCount; i++) {
    //     for (let j = 0; j < ColCount; j++) {
    //         createABlock(i, j, Math.random() > 0.5)
    //     }
    // }

</script>
</html>
